<template>
    <div class="banner">
        <div class="banner-box">
            <swiper :options="swiperOption" ref="mySwiper" >
                <!-- slides -->
                <swiper-slide v-for="item in recommend" :key="item.key">
                    <img :src="item.picUrl" alt="">
                </swiper-slide>
               
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div>
    </div>

</template>
<script>
import {getRecommend} from 'api/recommend'
import {ERR_OK} from 'api/config'
export default {
    data() {
      return {
        recommend:[],
        swiperOption: {
            pagination: {
                el: '.swiper-pagination'
            },
            loop:true,
            autoplay:true,
            speed:300,
            delay:200
        }
        
      }
    },
    created(){
        this._getRecommend()
    },
    methods:{
        _getRecommend() {
            getRecommend().then((res) => {
                if (res.code === ERR_OK) {
                    this.recommend=res.data.slider
                }
            })
        },
    }
}
</script>
<style lang="stylus" scoped>
    @import "~assets/stylus/variable"
    .banner
        position relative
        width: 100%
        height 0
        padding-top 40%
        background-color #ddd
        overflow hidden
        .banner-box
            position absolute
            top 0
            left 0
            width 100%
            height 100%
            img 
                width 100%
            >>>.swiper-pagination-bullet
                width .15rem
                height .15rem
                background-color #ffffff
                opacity .5
                border-radius .1rem
                transition all .3s
            >>>.swiper-pagination-bullet-active
                opacity 1
                width .3rem
        
</style>